<template>
	<div class="address-mian">
		<form>
			<div class="row clear">
				<div class="row-name fl">联系人:</div>
				<input type="text" v-model="consignee" placeholder="姓名" class="row-text fl"/>
			</div>
			<div class="row clear">
				<div class="row-name fl">联系电话:</div>
				<input type="text" placeholder="收货人电话" class="row-text fl"  v-model="mobile"  maxlength="11" />
			</div>
			<div class="row clear" @click="popupFlag = true">
          <div class="row-name fl">所在地区:</div>
          <input type="text" placeholder="请选择" class="row-text fl" disabled :value="proValue.name && cityValue.name && areaValue.name ? [proValue.name,cityValue.name,areaValue.name] : ''"/>
          <img src="../assets/image/ico_arrows@2x.png" class="to-add fr"/>
			</div>
			<div class="row clear">
				<div class="row-name fl">详细地址:</div>
				<input type="text" placeholder="请填写" class="row-text fl" v-model="address"/>
			</div>
			<div class="row clear">
				<div class="row-name fl">设为默认</div>
				<mt-switch v-model="value" class="fr"></mt-switch>
			</div>
		</form>
    <div class="popup" @click="popupFlag = false" v-show="popupFlag">
      <mt-picker :slots="slots" @change="onValuesChange" value-key="name"></mt-picker>
    </div>

		<!--保存-->
		<a class="save" @click="addAddress">保存</a>
	</div>
</template>
<script>
	import Vue from 'vue'
  import '../assets/js/Region'
  import { Switch } from 'mint-ui';
  import { Picker } from 'mint-ui';
  import 'mint-ui/lib/picker/style.css';

  Vue.component(Picker.name, Picker);
  Vue.component(Switch.name, Switch);

	export default {
		data () {return {
		    token:'',
        consignee:'',
        mobile:'',
        address:'',
        value:false,
        popupFlag:false,
        provinceList:[],
        cityList:["市级"],
        areaList:["县级"],
        slots:[],
        proValue:'',
        cityValue:'',
        areaValue:'',
        orderConsignee:'',
        isDefault:0,
    }},
		name: 'app',
    watch : {
      mobile () {
        this.mobile = this.mobile.replace(/[^\d]/g, '');
      }
    },
    mounted:function () {
      this.$nextTick(function () {
        this.fetch();
      })
    },
		methods:{
      fetch:function () {
        this.token = (window.localStorage.getItem("token") || '[]');
        this.slots=[{
          flex: 1,
          values: province,
          className: 'slot1',
          textAlign: 'center',
          defaultIndex:5,
        }, {
          divider: true,
          content: '-',
          className: 'slot2',
        }, {
          flex: 1,
          values: this.cityList,
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4',
        }, {
          flex: 1,
          values: this.areaList,
          className: 'slot5',
          textAlign: 'center'
        }]
      },
      onValuesChange(picker, values) {
          var _this = this;
          if( values[0].type == 1){
            var pro = values[0];
            var proId = pro["id"];
            var cities = {};
            for (var i = 0; i < city.length; i++) {
              if (cities[city[i].parentId]) {
                cities[city[i].parentId].push(city[i])
              }else {
                cities[city[i].parentId] = [city[i]]
              }
            }
            _this.cityList=cities[proId];
            _this.slots[2].values=_this.cityList;
            _this.proValue = values[0];
          }else if(values[0].type == 2){
            var cityObject= values[0];
            var cityId = cityObject["id"];
            var areas = {};
            for (var i = 0; i < area.length; i++) {
              if (areas[area[i].parentId]) {
                areas[area[i].parentId].push(area[i])
              }else {
                areas[area[i].parentId] = [area[i]]
              }
            }
            _this.areaList=areas[cityId];
            _this.slots[4].values=_this.areaList;
            _this.cityValue = values[0];
          }else if(values[0].type == 3){
            _this.areaValue = values[0];
          }
      },
      addAddress:function () {
        var _this = this;
        if(this.value == false){
          _this.isDefault = 0;
        }else{
          _this.isDefault = 1;
        }
        if(_this.consignee && _this.mobile && _this.proValue.name && _this.cityValue.name && _this.areaValue.name && _this.address != ''|| null || undefined){
          const phoneReg = /^1[3|4|5|7|8]{1}\d{9}/;
          const type = 'register';
          if(!phoneReg.test(_this.mobile)) {
            alert("请输入正确手机号码");
            return;
          }else {
            this.orderConsignee = '{"consignee":"'+ this.consignee +'","provinceId":"'+ this.proValue.id +'","province":"'+ this.proValue.name +'","cityId":"'+ this.cityValue.id +'","city":"'+ this.cityValue.name +'","districtId":"'+ this.areaValue.id +'","district":"'+ this.areaValue.name +'","address":"'+ this.address +'","mobile":"'+ this.mobile +'","isDefault":"'+ this.isDefault +'",}';
            this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/modifyConsignee',{token:this.token,orderConsignee:this.orderConsignee},{emulateJSON : true}).then(function (res) {
              if(res.body.code == 13000){
                this.$router.go(-1)
              }
            });
          }
        }else {
          if(_this.consignee == ''){
            alert("请输入联系人");
          }else if(_this.mobile == ''){
            alert("请输入联系电话");
          }else if(_this.proValue.name == ''|| _this.cityValue.name =='' || _this.areaValue.name==''){
            alert("请选择所在地区");
          }else if(_this.address == ''){
            alert("请输入详细地址");
          }
        }
      },
    },
	}
</script>
<style lang="scss">
.address-mian{
	form{
		.row{
			width: 100%; height: 0.88rem; background:#fff; margin-bottom:0.04rem;
			.row-name{ width: 1.65rem; height:0.88rem; font-size: 0.24rem; text-indent: 0.31rem; line-height: 0.88rem; color: #333;}
			.row-text{ display:block; width:4.2rem; height: 0.88rem; border: 0; outline:none; font-size: 0.28rem; line-height: 0.88rem; }
			::-webkit-input-placeholder {color: #aaa; font-size: 0.28rem; text-align: left;}
      input:disabled{ background: #fff;}
      .to-add{display: block; width: 0.14rem; height: 0.24rem; padding: 0.32rem 0.3rem 0.32rem 0;}
		}
	}
	.mint-switch{
		margin: 0.12rem 0.29rem 0.12rem 0;
		.mint-switch-input:checked + .mint-switch-core{border-color:#ff365d; background: #ff365d;}
	}
  .popup{width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 9999;}
  .picker{position:fixed; bottom:0; left:0; z-index: 10000; width: 100%; background: #fff;}
  .picker-item{ font-size: 0.3rem;}
	.save{ width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.3rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }
}
</style>
